import React, { useState } from 'react';
import { Form, Input, Button, message, Tabs, Card } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
import { setUser, setLoading } from '../../store/userSlice';
import { userApi } from '../../api/userApi';
import '../../styles/Auth.css';

const Login = () => {
  const [loginType, setLoginType] = useState('email');
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onFinish = async (values) => {
    try {
      dispatch(setLoading(true));
      const response = await userApi.login(values);
      dispatch(setUser(response.user));
      message.success('登录成功！');
      navigate('/');
    } catch (error) {
      message.error(error.message || '登录失败，请重试');
    } finally {
      dispatch(setLoading(false));
    }
  };

  const items = [
    {
      key: 'email',
      label: '邮箱登录',
      children: (
        <Form
          name="email-login"
          onFinish={onFinish}
          autoComplete="off"
          className="auth-form"
        >
          <Form.Item
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
            className="auth-form-item"
          >
            <Input prefix={<MailOutlined />} placeholder="邮箱" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
            className="auth-form-item"
          >
            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
          </Form.Item>

          <Form.Item className="auth-form-item">
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>

          <div className="auth-footer">
            <Link to="/register">还没有账号？立即注册</Link>
          </div>
        </Form>
      )
    },
    {
      key: 'phone',
      label: '手机号登录',
      children: (
        <Form
          name="phone-login"
          onFinish={onFinish}
          autoComplete="off"
          className="auth-form"
        >
          <Form.Item
            name="phone"
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
            ]}
            className="auth-form-item"
          >
            <Input prefix={<PhoneOutlined />} placeholder="手机号" />
          </Form.Item>

          <Form.Item
            name="verificationCode"
            rules={[{ required: true, message: '请输入验证码' }]}
            className="auth-form-item"
          >
            <Input
              placeholder="验证码"
              suffix={
                <Button type="link" size="small">
                  获取验证码
                </Button>
              }
            />
          </Form.Item>

          <Form.Item className="auth-form-item">
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>

          <div className="auth-footer">
            <Link to="/register">还没有账号？立即注册</Link>
          </div>
        </Form>
      )
    }
  ];

  return (
    <div className="auth-container">
      <Card className="auth-card">
        <div className="auth-header">
          <h1 className="auth-title">在线学习平台</h1>
          <p className="auth-subtitle">开启你的学习之旅</p>
        </div>

        <Tabs
          activeKey={loginType}
          onChange={setLoginType}
          items={items}
          className="auth-tabs"
        />

        <div className="auth-info-box">
          <p>默认管理员账号：</p>
          <p>邮箱：admin@ex.com</p>
          <p>密码：admin123</p>
        </div>
      </Card>
    </div>
  );
};

export default Login;